<template>
  <div>
    <div>
      <Row style="padding:12px 30px;" type='flex' v-if='filterData.length>0' justify="space-between">
      <!-- <Col v-for="(item, i) in filterData" :key="i" :xs="11" :sm="11" :md="11" :lg="11" :xl="7" class="setting-card-box"> -->
        <Col v-for="(item, i) in filterData" :key="i" class="setting-card-box">
          <Card class="setting-card">
            <Row type='flex' align="middle" justify="space-between" style="height:100px">
              <Col class="setting-show">
                <p class="setting-title">{{item.name}}</p>
                <p class="setting-content">{{item.description}}</p>
                <p class="setting-time">{{item.updateTime}}</p>
              </Col>
              <Col style='margin-left:15px'>
                <Button type="primary" class="setting-btn" v-if="item.manner == 1" @click="setting(item.fid)">设置</Button>
                <i-Switch v-model="item.dictValue" @on-change="changeSwitch(item)" v-else></i-Switch>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col v-if="filterData.length % 3 === 2" class="setting-card-box"></Col>
      </Row>
      <div style="text-align:center" v-else>
        <!-- <p>暂无数据</p> -->
        <img :src="error">
      </div>
    </div>
  </div>
</template>

<script>
import error from '@/assets/images/error-page/error.svg'
export default {
  props: {
    filterData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      error: error
    }
  },
  methods: {
    setting (id) {
      this.$emit('goSetting', id)
    },
    changeSwitch (item) {
      this.$emit('handleSwitch', item)
    }
  }
}
</script>
<style>
@media screen and (min-width: 1600px){
  .setting-card-box{
    width: 30%;
  }
}
@media screen and (min-width: 1350px) and (max-width: 1600px){
  .setting-card-box{
    width: 30%;
  }
}
@media screen and (max-width: 1349px){
  .setting-card-box{
    width: 45%;
  }
}
@media screen and (min-width: 1600px){
  .setting-card-box{
    /* margin-right: 2%; */
  }
  .setting-card-box:nth-of-type(3n){
    /* margin-right: 0; */
  }
}
@media screen and (min-width: 1200px) and (max-width: 1600px){
  .setting-card-box{
    /* margin-right: 5%; */
  }
  .setting-card-box:nth-of-type(3n){
    /* margin-right: 0; */
  }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .setting-card-box{
    /* margin-right: 4.2%; */
  }
  .setting-card-box:nth-of-type(2n){
    /* margin-right: 0; */
  }
}
</style>
<style scoped>
.setting-show{
  -moz-box-flex:1.0;
  -webkit-box-flex: 1.0;
  -webkit-flex: 1.0;
  -ms-flex: 1.0;
  flex: 1.0;
}
.setting-card{
  background:#F8F8F9;
  border: 1px solid #E8EAEC;
  /* height: 130px; */
  margin-bottom: 25px;
}
.setting-left {
  width: 80%;
}
.setting-right {
  position: absolute;
  width: 20%;
  right: 24px;
  top: calc((100% - 32px) / 2);
  text-align: right;
}
.setting-title {
  font-size: 14px;
  color: #17233d;
  font-weight: bold;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 1px;
}
.setting-content {
  font-size: 12px;
  color: #464c5b;
  margin-top: 2px;
  /* min-width: 120px;
  max-width: 180px; */
  /* overflow: hidden; */
  /* -o-text-overflow: ellipsis; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
}
.setting-time {
  font-family: HelveticaNeue;
  font-size: 12px;
  color: #808695;
  margin-top: 5px;
}
.setting-btn{
  width:65px;
}
</style>
